import classNames from "classnames"
import { useMemo, useState } from "react"
import './index.scss'
import { billTypeToName } from "@/contants"
import Icon from "@/components/Icon"
const DailyBill=({date,billList})=>{
    const result=useMemo(()=>{
        const pay=billList.filter((item)=>item.type==='pay').reduce((a,c)=>a+c.money,0)
        const income=billList.filter((item)=>item.type==='income').reduce((a,c)=>a+c.money,0)
        return{
            pay,
            income,
            total:pay+income
        }
    },[billList])
    const [isShow,setShow]=useState(false)

    return(
        <div className={classNames('dailyBill')}>
            <div className="header">
                <div className="dateIcon" >
                    <span className="date">{date}</span>
                    <span className={classNames('arrow',isShow&&'expand')} onClick={()=>setShow(!isShow)}></span>
                </div>
                <div className="oneLineOverview">
                    <div className="pay">
                        <span className="type">支出</span>
                        <span className="money">{result.pay.toFixed(2)}</span>
                    </div>
                    <div className="income">
                        <span className="type">收入</span>
                        <span className="money">{result.income.toFixed(2)}</span>
                    </div>
                    <div className="balance">
                        <span className="money">{result.total.toFixed(2)}</span>
                        <span className="type">结余</span>
                    </div>
                </div>
            </div>
            {/* 单日列表 */}
            <div className="billList" style={{display:isShow?'block':'none'}}>
                {
                    billList.map(item=>{
                        return (
                            <div className="bill" key={item.id}>
                                <Icon type={item.useFor}></Icon>
                                <div className="detail" >
                                    <div className="billType">{billTypeToName[item.useFor]}</div>
                                </div>
                                <div className={classNames('money',item.type)}>
                                    {item.money.toFixed(2)}
                                </div>
                            </div>
                            
                        )
                    })
                }
            </div>
        </div>
    )
}
export default DailyBill